<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>//demo/09.chatRoom.html</title>
    <script src="../js/wfQuery.js?debug=&_t=1422166111050"></script>
	<!-- 
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script>wfQuery = jQuery</script>
    -->
    <style>
    pre.code{background: #d2d2d2;padding: 4px;}
    </style>
</head>
<body>
<a href="../index.html">返回首页</a>

<link rel="stylesheet" href="css/chat.style.css">
<div id="convo" data-from="shy2850">  
	<ul class="chat-thread" id="chat">
		
	</ul>
	<fieldset >
		<legend>输入面板</legend>
		<form action="#" id="form">
			<input type="text" name="msg" id="msg" style="width:300px;margin-right:20px;" placeholder="输入信息" required >
			我的名字：<input type="text" name="name" id="name" placeholder="[昵称]" required > <br><br>
			<input type="submit" value="发送">
		</form>
	</fieldset>
</div>
<script>
(function($) {
	var root = "http://182.92.234.110:8973";
	//var root = "http://localhost:8973";
	var time = "", chat = $("#chat"), name;

	while( !(name = window.prompt("请输入你的昵称进入聊天室!")) || name.match(/\s+/) );
	$("#name").val(name);

	$("#form").on("submit",function(e){
		e.preventDefault();
		var data = {
			name: $("#name").val(),
			method:"push",
			msg: $("#msg").val()
		};
		$("#msg").val("");
		$.jsonp(root,data,function(d){
			console.log( '发送成功！' );
			$("#msg").trigger("focus");
		});
	});

	window.get = function(){
		$.jsonp(root,{
			name:$("#name").val(),
			method:"pop",
			time: time
		},function(d){
			time = d.time
			d.msgList.forEach(function(m){
				chat.prepend( $('<li></li>').text(m.name+":"+m.msg) );
			});
			window.get();
		});
	}

	window.get();

	window.onbeforeunload = function(){
		$.jsonp(root,{
			name:$("#name").val(),
			method:"exit",
			time: time
		});
	};
})(wfQuery)
</script>
<a href="https://github.com/shy2850/wfQuery.git" target="_"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>
